<script setup lang="ts">
// 目标: 梳理axios与ts配合
// 接口: http://geek.itheima.net/v1_0/channels
import axios from 'axios'
import { ref } from 'vue'
// axios()
// axios.get()
// axios.post()

type ListType = {
  id: number
  name: string
}[]
//接口返回数据的类型
type ListRes = {
  data: {
    channels: ListType
  }
  message: string
}

const list = ref<ListType>([]) // 复杂类型数据需要显示指定泛型

async function getList() {
  const res = await axios.get<ListRes>('http://geek.itheima.net/v1_0/channels')
  // console.log(res.data.data.channels)
  list.value = res.data.data.channels
}

getList()
</script>

<template>
  <div>app组件</div>

  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style></style>
